<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="edge" />
<link rel="shortcut icon" href="/asset/example/favicon.ico" />
<title>商品管理</title>
<link href="/asset/themes/insdep/easyui.css" rel="stylesheet" type="text/css">
<link href="/asset/themes/insdep/easyui_animation.css" rel="stylesheet" type="text/css">
<link href="/asset/themes/insdep/easyui_plus.css" rel="stylesheet" type="text/css">
<link href="/asset/themes/insdep/insdep_theme_default.css" rel="stylesheet" type="text/css">
<link href="/asset/themes/insdep/icon.css" rel="stylesheet" type="text/css">
<link href="/asset/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="/asset/jquery.min.js"></script>
<script src="/asset/jquery.easyui.min.js"></script>
<script src="/asset/themes/insdep/jquery.insdep-extend.min.js"></script>
<style type="text/css">
.layout-panel-west {
    border-right: 1px solid #c5c5c5;
}
</style>
</head>
<body>
    <table id="product_datagrid" style="height: 500px;">
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="title:'编号',field:'id',width:80,sortable:false,align:'center'"></th>
                <th data-options="title:'名称',field:'name',width:80,sortable:false,align:'center'"></th>
                <th data-options="title:'虚拟商品',field:'virtualFlg',width:80,sortable:false,align:'center',formatter:App.product.virtualFlg_formatter"></th>
                <th data-options="title:'上下架',field:'saleFlg',width:80,sortable:false,align:'center',formatter:App.product.saleFlg_formatter"></th>
                <th data-options="title:'支付类型',field:'payType',width:80,sortable:false,align:'center'"></th>
                <th data-options="title:'创建时间',field:'createTime',width:80,sortable:false,align:'center',formatter:App.product.createTime_formatter"></th>
                <th data-options="title:'类别',field:'categoryId',width:80,sortable:false,align:'center',formatter:App.product.categoryId_formatter"></th>
                <th data-options="field:'button',width:180,fixed:true,align:'center',formatter:App.product.datagrid_buttons">操作</th>
            </tr>
        </thead>
    </table>
    <div id="product_toolbar" style="padding:2px 5px;">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" id="product_save_btn">新增</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" id="product_delete_btn">删除选中</a>
        <span class="datagrid-btn-separator" style="vertical-align: middle; height: 25px;display:inline-block;float:none"></span>
        名称 : <input class="easyui-textbox" name="name" style="width:100px">
        类别 : <select id="product_search_categoryId" name="categoryId" data-options="valueField:'value',textField:'text',multiple:true,panelHeight:'auto'" style="width:100px"></select>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" id="product_search_btn">搜索</a>
    </div>
    <div id="product_save_dlg" class="easyui-dialog" title="新增" data-options="iconCls:'icon-add',cls:'dialog',modal:true,closed:true,buttons:'#product_save_buttons'" style="width:400px;height:90px;">
        <div style="padding:0px 60px 0px 60px">
            <form id="product_save_form" method="post">
                <table style="border-spacing:10px;">
                </table>
            </form>
        </div>
    </div>
    <div id="product_save_buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton button-default" id="product_save_confirm">确定</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" id="product_save_cancel">取消</a>
    </div>
    <div id="product_update_dlg" class="easyui-dialog" title="修改" data-options="iconCls:'icon-edit',cls:'dialog',modal:true,closed:true,buttons:'#product_update_buttons'" style="width:400px;height:90px;">
        <div style="padding:0px 60px 0px 60px">
            <form id="product_update_form" method="post">
                <table style="border-spacing:10px;">
                </table>
            </form>
        </div>
    </div>
    <div id="product_update_buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton button-default" id="product_update_confirm">确定</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" id="product_update_cancel">取消</a>
    </div>
    <script>
$.xpost = function(formid, url){
    return $.ajax(url, { method:"post", data:new FormData(document.getElementById(formid)), contentType:false, processData:null});
};
var App = window.App || {};
$(function() {
    $.when($.get("/category/findAllKV"),$.get("/category/findAll")).done(function(a1,a2){
		var CategoryAllKVSource=a1[0]
		var CategoryAllSource=a2[0]

        var ProductVirtualFlg = {"true":"是","false":"否"};
        var ProductVirtualFlgSource = [{"text":"是","value":true},{"text":"否","value":false}];
        var ProductSellFlg = {"true":"上架","false":"下架"};
        var ProductSellFlgSource = [{"text":"上架","value":true},{"text":"下架","value":false}];
        App.product = (function(){
            var virtualFlg_formatter = function (value, row, index) {
                return ProductVirtualFlgSource[value];
            }
            var saleFlg_formatter = function (value, row, index) {
                return ProductSellFlgSource[value];
            }
            var createTime_formatter = function (value, row, index) {
                var d = new Date(value);return ''+d.getFullYear()+'-'+((d.getMonth()+1)<10?('0'+(d.getMonth()+1)):(d.getMonth()+1))+'-'+(d.getDate()<10?('0'+d.getDate()):d.getDate())+'';
            }
            var categoryId_formatter = function (value, row, index) {
                return CategoryAllKVSource[value];
            }
            return {
                "virtualFlg_formatter":virtualFlg_formatter,"saleFlg_formatter":saleFlg_formatter,"createTime_formatter":createTime_formatter,"categoryId_formatter":categoryId_formatter,"datagrid_buttons":function(value, row) {return "<a href='javascript:void(0)' data-id='"+row.id+"' class='button-edit oper'>修改</a> <a href='javascript:void(0)' data-id='"+row.id+"' class='button-delete oper'>删除</a>";}
            };
        }());

        // 条件查询逻辑--------begin
        $("#product_search_btn").click(function(){
            var param={};
            var all = $("#product_toolbar [name]");
            for(var i = 0; i < all.length; i++){
                var dom = all[i];
                if(dom.value == ""){ // 如果没有值，不必作为参数
                    continue;
                }
                if(param[dom.name]===undefined){
                    param[dom.name]=[];
                }
                param[dom.name].push(dom.value);
            }
            // jquery直接发送数组类型参数，不能与springmvc很好配合，转换为逗号分隔的字符串
            for(var key in param){
                param[key] = param[key].join(",");
            }
            $("#product_datagrid").datagrid("load", param);
        });
        
        $("#product_search_categoryId").combobox({data:CategoryAllSource,editable:false});
        // 条件查询逻辑--------end

        // 新增逻辑--------begin
        $("#product_save_btn").click(function(){
            $("#product_save_dlg").dialog("open");
        });
        $("#product_save_confirm").click(function(){
            $.xpost("product_save_form", "/product/save").done(function(){
                $('#product_datagrid').datagrid("load");
                $("#product_save_dlg").dialog("close");
            });
        });
        $("#product_save_cancel").click(function(){
            $("#product_save_dlg").dialog("close");
        });
        // 新增逻辑--------end

        // 修改逻辑--------begin
        $("#product_update_confirm").click(function(){
            $.xpost("product_update_form", "/product/update").done(function(){
                $('#product_datagrid').datagrid("load");
                $("#product_update_dlg").dialog("close");
            });
        });
        $("#product_update_cancel").click(function(){
            $("#product_update_dlg").dialog("close");
        });
        // 修改逻辑--------end

        // 删除选中逻辑--------begin
        $("#product_delete_btn").click(function(){
            var rows = $('#product_datagrid').datagrid("getSelections");
            if(rows.length==0){
                $.messager.alert("删除", "请选中要删除的行!");
                return;
            }
            $.messager.confirm("删除", "确定要删除吗?", function(r){
                if(r) {
                    var ids = rows.map(r=>r.id).join(",");
                    $.get("/product/deleteByIds", {id:ids}).done(function(){
                        $('#product_datagrid').datagrid("load");
                    });
                }
            });
        });
        // 删除选中逻辑--------end

        // 编辑一对多关系--------begin
        // 编辑一对多关系--------end

        $('#product_datagrid').datagrid({
            cls : "theme-datagrid",
            pagination : true,
            fitColumns : true,
            fit:true,
            method:"get",
            toolbar: "#product_toolbar",
            url : '/product/datagrid',
            onLoadSuccess : function() {
                $('.button-edit.oper').linkbutton({
                    iconCls : 'icon-edit'
                }).click(function(){
                    var id = $(this).data("id");
                    $.get("/product/findById", {id:id}).done(function(json){
                        $("#product_update_form").form("load", json);
                        $("#product_update_dlg").dialog("open");
                    });
                });
                $('.button-delete.oper').linkbutton({
                    iconCls : 'icon-remove'
                }).click(function() {
                    var id = $(this).data("id");
                    $.messager.confirm("删除", "确定要删除吗?", function(r){
                        if(r) {
                            $.get("/product/deleteById", {id:id}).done(function(){
                                $('#product_datagrid').datagrid("load");
                            });
                        }
                    });
                });
            }
        });
    });
});
    </script>
</body>
</html>